<template>
	<view class="container">
		<view class="index-search-box">
			<navigator class="index-search" hover-class="none" openType="navigate" url="../search/index">
				<view class="index-cont-search t-c">
					<icon class="text-center" :color="searchColor" :size="searchSize" type="search"></icon>
					<text>{{ searchName }}</text>
				</view>
			</navigator>
		</view>
		<!-- 分类样式：一级分类(大图) 10 -->
		<view class="cate-content" v-if="templet.category_style == 10 && list.length > 0">
			<view class="cate-wrapper cate_style__10">
				<scroll-view scroll-y="true" :style="{ height: scrollHeight - 10 + 'px' }">
					<view class="cate-item" v-for="(item, index) in list" :key="index">
						<navigator hover-class="none" :url="'../category/list?category_id=' + item.category_id"><image mode="widthFix" :src="item.image.file_path"></image></navigator>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 分类样式：一级分类(小图) 11 -->
		<view class="cate-content" v-else-if="templet.category_style == 11 && list.length > 0">
			<view class="cate-wrapper cate_style__11">
				<scroll-view class="clear" scroll-y="true" :style="{ height: scrollHeight - 10 + 'px' }">
					<view class="cate-item" v-for="(item, index) in list" :key="index">
						<navigator hover-class="none" :url="'../category/list?category_id=' + item.category_id">
							<image mode="widthFix" :src="item.image.file_path"></image>
							<text class="f-26">{{ item.name }}</text>
						</navigator>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 分类样式：二级分类 20 -->
		<view class="cate-content dis-flex" v-else-if="templet.category_style == 20 && list.length > 0">
			<!-- 左侧 一级分类 -->
			<scroll-view class="cate-left f-28" :scroll-y="true" :style="{ height: scrollHeight + 'px' }">
				<text @tap="selectNav" class="type-nav" :class="{ selected: curNav == item.category_id }" :data-id="item.category_id" :data-index="index" v-for="(item, index) in list" :key="item.cateLeft">{{ item.name }}</text>
			</scroll-view>

			<!-- 右侧 二级分类 -->
			<scroll-view class="cate-right b-f" :scroll-top="scrollTop" scroll-y="true" :style="{ height: scrollHeight + 'px' }">
				<view v-if="list[curIndex]">
					<view class="cate-right-cont">
						<view class="cate-two-box">
							<view class="cate-cont-box">
								<view class="flex-three" :data-list="index" v-for="(child, index) in list[curIndex].child" :key="child.cit">
									<navigator hover-class="none" :url="'../category/list?category_id=' + child.category_id">
										<view class="cate-img" :id="child.image_id"><image :src="child.image.file_path"></image></view>
										<text>{{ child.name }}</text>
									</navigator>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="!list.length && notcont">
			<view class="yoshop-notcont">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无商品分类哦</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollHeight: 0,
			list: [],
			templet: {},
			curNav: false,
			notcont: false,

			// 搜索框样式
			searchColor: 'rgba(0,0,0,0.4)',
			searchSize: uni.upx2px(30),
			searchName: '搜索商品',
			curIndex: 0,
			scrollTop: null
		};
	},
	onShow() {
		this.setListHeight();
		this.getCategoryList();
	},
	methods: {
		/**
		 * 设置分类列表高度
		 */
		setListHeight() {
			wx.getSystemInfo({
				success: res => {
					this.scrollHeight = res.windowHeight - uni.upx2px(94);
				}
			});
		},
		/**
		 * 获取分类列表
		 */
		getCategoryList() {
			this.$get(this.$api.getCategory, {}, res => {
				let data = res.data;
				this.list = data.list;
				this.templet = data.templet;
				this.curNav = data.list.length > 0 ? data.list[0].category_id : true;
				this.notcont = !data.list.length;
			});
		},
		/**
		 * 一级分类：选中分类
		 */
		selectNav(e) {
			this.curNav = e.target.dataset.id;
			this.curIndex = parseInt(e.target.dataset.index);
			this.scrollTop = 0;
		}
	},
	/**
	 * 设置分享内容
	 */
	onShareAppMessage() {
		return {
			title: this.data.templet.share_title,
			path: '/pages/category/index?' + Tools.getShareUrlParams()
		};
	}
};
</script>

<style>
/* 搜索框 */

.index-search-box {
	background: #fff;
	padding: 13rpx 13rpx 18rpx 13rpx;
}

.index-search {
	border-bottom: 0;
	background: #fff;
	border-radius: 50rpx;
	overflow: hidden;
	position: relative;
	font-size: 28rpx;
	color: #999;
	box-sizing: border-box;
	height: 64rpx;
	line-height: 64rpx;
}

/* 通用 */

page {
	background: #fff;
}

.cate-content {
	background: #fff;
}

.cate-wrapper {
	padding: 0 20rpx 20rpx 20rpx;
	box-sizing: border-box;
}

/* 一级分类(大图) 10 */

.cate_style__10 .cate-item {
	margin-bottom: 18rpx;
}

.cate_style__10 .cate-item:last-child {
	margin-bottom: 0;
}

.cate_style__10 .cate-item image {
	display: block;
	width: 100%;
	height: auto;
}

/* 一级分类(小图) 11 */

.cate_style__11 .cate-item {
	float: left;
	padding: 25rpx;
	width: 33.3333%;
	text-align: center;
	box-sizing: border-box;
}

.cate_style__11 .cate-item image {
	/* height: 208.656rpx; */
	width: 100%;
	display: block;
}

.cate_style__11 .cate-item image {
	/* height: 208.656rpx; */
	display: block;
	width: 100%;
	margin-bottom: 10rpx;
}

.cate_style__11 .cate-item text {
	display: block;
	color: #555;
}

/* 二级分类 20 */

.cate-content {
	width: 100%;
}

.cate-left {
	flex-direction: column;
	display: flex;
	width: 200rpx;
	color: #444;
	height: 100%;
	background: #f8f8f8;
}

.cate-right {
	display: flex;
	flex-direction: column;
	width: 550rpx;
	height: 100%;
	overflow: hidden;
}

.cate-right-cont {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	padding-top: 26rpx;
}

.type-nav {
	position: relative;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	z-index: 10;
	display: block;
	font-size: 26rpx;
}

.type-nav.selected {
	background: #fff;
	color: #ff495e;
	border-right: none;
	font-size: 28rpx;
}

.cate-cont-box {
	margin-bottom: 30rpx;
	padding-bottom: 10rpx;
	background: #fff;
	overflow: hidden;
}

.cate-cont-box .cate-img {
	padding: 13rpx 10rpx 4rpx 10rpx;
}

.cate-cont-box .cate-img image {
	width: 100%;
	height: 150rpx;
}

.cate-cont-box text {
	text-align: center;
	display: block;
	font-size: 26rpx;
	padding-bottom: 14rpx;
	color: #444;
	padding: 0 15rpx 30rpx 15rpx;
}

.cate-two-box {
	width: 100%;
	padding: 0 10px;
}
</style>
